<template>
  <div class="form" @click="showDrawer" :style="view?'border: none !important;':'cursor: pointer;'">
    <van-form @submit="submit">
      <van-field
        v-for="(item,index) in props.formType"
        :class="item.type == 'form-checkbox'?'tmp-checkbox':''"
        :key="index"
        v-model="item.value"
        :label="item.title"
        :placeholder="item.placeholder"
      >
        <template slot="input" v-if="item.type == 'form-radio'">
          <van-radio-group v-model="item.value" direction="horizontal">
            <van-radio v-for="tags in item.tags" :key="tags" :name="tags">{{tags}}</van-radio>
          </van-radio-group>
        </template>
        <template slot="input" v-if="item.type == 'form-checkbox'">
          <van-checkbox-group v-model="item.checkValue" direction="horizontal" class="checkbox">
            <van-checkbox v-for="tags in item.tags" :key="tags" :name="tags">{{tags}}</van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <drawer :attr="list.attr" :show.sync="show" @change="editAttr" :index="list.index" />
  </div>
</template>

<script>
import drawer from "../drawer"
import changeAttr from '@/utils/changeAttr.js'
import changeViewAttr from '@/utils/changeViewAttr.js'

export default {
  components:{
    drawer
  },
  name:"tmpForm",
  props:{
    list:{
      type:Object,
    },
    view:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      show:false,
      props:{},
      changeAttr,
    }
  },
  created() {
    this.editAttr()
  },
  methods: {
    submit(){
      let formType = JSON.parse(JSON.stringify(this.props.formType))
      let form = {}
      for(let i of formType){
        if(i.type == 'form-checkbox'){
          form[i.name] = i.checkValue
        }else{
          form[i.name] = i.value
        }
      }
    },
    showDrawer(){
      if(!this.view){
        this.show = true
      }
    },
    editAttr(){
      if(this.view){
        this.props = changeViewAttr(this.list.attr,this.list.index)
      }else{
        this.props = changeAttr(this.list.attr,this.list.index)
      }
    }
  },
}
</script>

<style scoped>
  .form{
    box-sizing: border-box;
    border: 1px dashed transparent;
  }
  .form:hover{
    border: 1px dashed #1989fa;
  }
  .tmp-checkbox{
    padding-bottom: 0;
  }
  .checkbox .van-checkbox--horizontal{
    margin-bottom: 10px;
  }
</style>